<template>
	<view>
		
		<!--时间段显示-->
		<liuyuno-tabs v-if="selectCheckTimeSpan !== 0" :tabData="checkTimeSpanTabs" 
			@tabClick="checkTimeSpanClick" :activeIndex="selectCheckTimeSpanIndex"></liuyuno-tabs>
	
		<!--楼栋显示-->			
		<liuyuno-tabs :tabData="buildingList" @tabClick="buildClick" />
		<!--楼层显示-->
		<liuyuno-tabs :tabData="floorList" @tabClick="floorClick" />
		
		
		<!--每层宿舍信息显示-->
		<view class="classAttendanceWrap">
			<view
				:class="[item.grade === 1?'classAttendence0':(item.grade === 2 ?'classAttendence1':(item.grade===3?'classAttendence2':'classAttendence3'))]"
				v-for="(item,index) in floorDorList" :key="index" @click="toHygieneDetail(item)">
				<view class="classAttendenceFont">
					
					<view v-if="item.grade===2" style="color:#0000FF;font-size: 34rpx;margin-top:0rpx">
						{{item.dormitoryNo}}
					</view>
					<view v-else style="font-size: 34rpx;">{{item.dormitoryNo}}</view>
					
					<view v-if="item.grade === 1" style="font-size: 22rpx">优秀</view>
					<view v-else-if="item.grade === 2" style="font-size: 22rpx;margin-top:10rpx">良好</view>
					<view v-else-if="item.grade === 3" style="font-size: 22rpx">差</view>
					<view v-else style="font-size: 22rpx">未查</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import teachClass from "@/api/modules/teachClass.js"
	
	export default {
		onShow() {
			this.getEachLayerDormitoryHygiene();
		},
		onLoad(options) {
			this.selectCheckTimeSpan = parseInt(options.checkTimeSpan, 10);
			if(this.selectCheckTimeSpan !==0) {
				if(new Date().getHours()>=12) { //下午
					this.selectCheckTimeSpan = 2
					this.selectCheckTimeSpanIndex = 1
				}else { //上午
					this.selectCheckTimeSpan = 1
					this.selectCheckTimeSpanIndex =0
				}
			}
			
			//获取楼栋和楼层
			teachClass.getDictByType("sys_building").then(res => {
				this.buildingList = [
				  ...res.data.map(item => {  
				    let obj = {};  
					obj.id = item.dictValue;
					obj.name = item.dictLabel;
				    return obj;  
				  })  
				];
				
				if(this.buildingList.length === 0) {
					return;
				}
				
				this.selectedBuildName = this.buildingList[0].name;
				this.selectedBuildNo = this.buildingList[0].id;
				
				teachClass.getDictByType("sys_storey").then(res => {
					this.floorList = [
					  ...res.data.map(item => {  
					    let obj = {};  
						obj.id = item.dictValue;
						obj.name = item.dictLabel;
					    return obj;  
					  })  
					];
					
					if(this.floorList.length === 0 ) {
						return;
					}
					this.selectedFloorName = this.floorList[0].name;
					this.selectedFloorNo = this.floorList[0].id;
					
					//根据楼栋和楼层获取宿舍信息
					this.getAppDorListByBuildAndFloor();
				})
			});
		},
		data() {
			return {
				buildingList: [],//楼栋tab
				floorList: [],//楼层tab
				checkTimeSpanTabs : ["上午","下午"], //检查时间段tab
				selectCheckTimeSpan : 0, //选中时间段
				selectedBuildName: '', //选中楼栋名称
				selectedFloorName: '', //选中楼层名称
				selectedBuildNo: '', //选中楼栋value
				selectedFloorNo: '', //选中楼层value
				selectCheckTimeSpanIndex: 0, //选中时间段下标
				floorDorList: [], //楼层对应宿舍信息
			}
		},
		methods: {
			//楼栋点击
			buildClick(index) {
				this.selectedBuildName = this.buildingList[index].name;
				this.selectedBuildNo = this.buildingList[index].id;
				this.getAppDorListByBuildAndFloor();
			},
			//楼层点击
			floorClick(index) {
				this.selectedFloorName = this.floorList[index].name;
				this.selectedFloorNo = this.floorList[index].id;
				this.getAppDorListByBuildAndFloor();
			},
			//时间段点击
			checkTimeSpanClick(index) {
				if(index === 0) {
					this.selectCheckTimeSpan = 1; //上午
				}else { 
					this.selectCheckTimeSpan = 2; //下午
				}
				this.getAppDorListByBuildAndFloor();
			},
			//根据楼栋和楼层获取宿舍信息
			getAppDorListByBuildAndFloor() {
				this.floorDorList = [];
				this.$api.dormitory.getAppDorListByStorey(this.selectedBuildName, this.selectedFloorName).then(res => {
					this.floorDorList=res.data;
					this.floorDorList.forEach((item, index) => {
						item.grade = "未查"
						item.dormitoryId = item.bdormitoryId
					});
					//根据楼栋，楼层，检查时间段获取当日每层宿舍卫生情况
					this.getEachLayerDormitoryHygiene();
				})
			},
			//根据楼栋，楼层，检查时间段获取当日每层宿舍卫生情况
			getEachLayerDormitoryHygiene() {
				this.$api.dormitory.getEachLayerDormitoryHygiene(this.selectedBuildNo,this.selectedFloorNo,this.selectCheckTimeSpan).then(res => {
					if (res.data.length > 0) {	
						this.floorDorList = this.floorDorList.map(classItem => {  
							const updatedItem = res.data.find(data => data.dormitoryId === classItem.dormitoryId); 
							return updatedItem || classItem; // 如果没有找到匹配的项，则返回原项  
						});  						
						this.$forceUpdate();
					} 
				})
				
			},
			//进入宿舍卫生详情页面
			toHygieneDetail(item) {
				uni.navigateTo({
					url: `/pages_duty/classTeacher/dormitoryHygiene/HygieneDetails?dormitoryId=${item.dormitoryId}&dormitoryNo=${item.dormitoryNo}&checkTimeSpan=${this.selectCheckTimeSpan}`
				})
			}
		}
	}
</script>

<style>
.classAttendanceWrap {
		width: 700rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}

	.classAttendence0 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/A.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/b.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence3 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/E-1.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence2 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-012.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}
	.classAttendenceFont {
		color: white;
		text-align: center;
		margin-top: 60rpx;
	
	}
</style>
